<template>
    <div class='right-container'>
        <div class="top">
            <img class="title" src="@/assets/right/top-title.png" alt="">
            <div class="content">
                <div class="item" v-for="(v, k) in TopItems" :key="k">
                    <div class="icon">
                        <img :src="v.icon" alt="">
                    </div>
                    <div class="label">{{ v.label }}</div>
                    <div class="value">{{ v.value }}</div>
                </div>
            </div>
        </div>
        <div class="center">
            <img class="title" src="@/assets/right/center-title.png" alt="">
            <div class="content">
                <div class="chart-wapper">
                    <Chart class="chart" :options="RightCenterOptions"></Chart>
                </div>
                <div class="comments">
                    <div class="item" v-for="(v, k) in Comments" :key="k">
                        <div class="icon">
                            <img src="@/assets/right/person.png" alt="">
                        </div>
                        <div class="value" :style="getTextColor(v.type)">{{ v.value }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <img class="title" src="@/assets/right/bottom-title.png" alt="">
            <div class="content">
                <Chart class="chart" :options="RightBottomOption"></Chart>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { RightCenterOptions } from '../constants/right/rightCenterOptions'
import { RightBottomOption } from '../constants/right/rightBottomOptions'
import { TopItems } from '../constants/right/topItems';
import { Comments, CommentType } from '../constants/right/comments'
import { onMounted } from 'vue'
const getTextColor = (type: CommentType) => {
    const colors = {
        [CommentType.GOOD]: '#3943F4',
        [CommentType.BAD]: '#F3AB45',
        [CommentType.NOTBAD]: '#3B73C0'
    }
    return {
        color: colors[type]
    }
}

const getRandomTop = () => {
    const items = document.querySelectorAll('.comments .item')
    items.forEach((item) => {
        item.style.top = Math.random() * 80 + '%'
        item.style.animationDelay = Math.random() * 20 +'s'
    })
}
onMounted(() => {
    getRandomTop()
})
</script>
<style lang='scss' scoped>
.right-container {
    width: 390px;

    .top {
        width: 100%;
        height: 235px;
        background: url(@/assets/right/top-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;

        .title {
            position: absolute;
            top: 14px;
            left: 14px;
            width: 116px;
            object-fit: cover;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            top: 70px;
            left: 14px;

            .item {
                width: 45%;
                display: flex;
                color: #dcdcdc;
                font-size: 14px;
                align-items: center;
                margin-bottom: 20px;

                .icon {
                    width: 26px;

                    img {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .label {
                    margin: 0 10px;
                }
            }
        }
    }

    .center {
        width: 100%;
        height: 265px;
        background: url(@/assets/right/center-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin-top: 40px;

        .title {
            position: absolute;
            top: 10px;
            left: 14px;
        }

        .content {
            position: absolute;
            left: 14px;
            top: 50px;
            background-color: #050A32;
            width: 358px;
            height: 201px;

            .chart-wapper {
                position: absolute;
                width: 150px;
                right: 10px;
                top: 50px;
                height: 100px;
            }

            .comments {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;

                .item {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    color: #dcdcdc;
                    // width:fit-content;
                    min-width: 300px;
                    font-size: 12px;
                    background: linear-gradient(to right, #1F4278 0%, transparent 50%);
                    padding: 2px 4px ;
                    border-radius: 20px;
                    // position: absolute;
                    left: 358px;
                    // z-index: 0;
                    top: 0;
                    animation: scrollLeft 10s linear infinite;
                    cursor: pointer;
                    &:hover{
                        animation-play-state:paused
                    }
                    .icon {
                        width: 22px;
                        position: relative;
                        top: 2px;
                        img {
                            width: 100%;
                            object-fit: cover;
                        }
                    }

                    .value {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    .bottom{
        width: 100%;
        height: 275px;
        background: url(@/assets/right/bottom-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin-top: 40px;
        .title{
            position: absolute;
            left: 14px;
            top: 14px;
        }
        .content{
            position: absolute;
            left: 14px;
            top: 50px;
            background-color: #050A32;
            width: 358px;
            height: 201px;
            .chart-wapper{
                position: absolute;
                width: 150px;
                right: 10px;
                top: 50px;
                height: 100px;
            }
        }
    }
}

@keyframes scrollLeft {
    100% {
        left: -400px
    }
}
</style>